import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

/*
  路由模式
    history / hash模式的区别？
      1. 美观：history更美观，hash路径带#，更难看
      2. 兼容性: history模式兼容性更差，hash兼容性更好
        可以通过 can i use 网站查阅前端兼容性问题
      3. 原理：
        history 默认通过 history.pushState等方法完成路由跳转
                通过 history.change 事件监听历史记录的变化
        hash  默认通过 location.hash 等方法完成路由跳转
              通过 hashchange 事件监听历史记录的变化
      4. history模式刷新出现404，hash不会

*/
// import Home from "../views/Home/index.vue";
// import About from "../views/About/index.vue";
// import Detail from "../views/Detail/index.vue";

/*
  路由懒加载：  
    1. 打包代码会将每个路由组件打包成一个单独js文件
    2. 按需加载（需要使用这个路由组件才会加载这个js文件）
*/
const Classified = () => import("../pages/Classified/index.vue");
const Dvd = () => import("../pages/Dvd/index.vue");
const Home = () => import("../pages/Home/index.vue");
const Ranking = () => import("../pages/Ranking/index.vue");
const Singer = () => import("../pages/Singer/index.vue");
const MV = () => import("../pages/MV/index.vue");
const Radio = () => import("../pages/Radio/index.vue");
const MyMusic = () => import("../pages/MyMusic/index.vue");
const MyPlay = () => import("@/components/Play/index.vue");
const SongList2 = () => import("@/components/SongList2/index.vue");
const PlayList = () => import("@/pages/PlayList/index.vue");
const SingerDetail = () =>
  import("../pages/Singer/components/SingerDetail/index.vue");
const router = createRouter({
  // 路由模式：
  history: createWebHistory(), // history模式
  // history: createWebHashHistory(), // hash模式
  // 路由配置项
  routes: [
    {
      name: "Home",
      path: "/home",
      component: Home,
      meta: {
        title: "首页",
      },
    },
    {
      name: "Classified",
      path: "/classified",
      component: Classified,
      meta: {
        title: "分类歌单",
      },
    },
    {
      name: "Dvd",
      path: "/dvd",
      component: Dvd,
      meta: {
        title: "歌碟",
      },
    },
    {
      name: "Ranking",
      path: "/ranking",
      component: Ranking,
      meta: {
        title: "排行榜",
      },
    },
    {
      name: "Singer",
      path: "/singer",
      component: Singer,
      meta: {
        title: "歌手",
      },
    },
    {
      name: "Radio",
      path: "/radio",
      component: Radio,
      meta: {
        title: "电台",
      },
    },
    {
      name: "MV",
      path: "/mv",
      component: MV,
      meta: {
        title: "MV",
      },
    },
    {
      name: "MyMusic",
      path: "/mymusic",
      component: MyMusic,
      meta: {
        title: "我的音乐",
      },
    },
    {
      name: "MyPlay",
      path: "/myplay",
      component: MyPlay,
      meta: {
        title: "播放器",
      },
    },
    {
      name: "SongList2",
      path: "/songlist2",
      component: SongList2,
      meta: {
        title: "歌曲播放",
      },
    },
    {
      name: "PlayList",
      path: "/playlist",
      component: PlayList,
      meta: {
        title: "歌单列表",
      },
    },
    {
      name: "SingerDetail",
      path: "/singerdetail",
      component: SingerDetail,
      meta: {
        title: "歌手详情",
      },
    },

    {
      // vue2中 path: "*"匹配任意地址
      // vue3：
      path: "/:pathMatch(.*)*",
      redirect: "/home",
    },
  ],
});

/*
  路由导航守卫：
    1. 全局路由导航守卫
      beforeEach
        权限控制（权限管理）
      beforeResolve
      afterEach
    2. 路由独享导航守卫

    3. 组件独享导航守卫
*/

// router.beforeEach((to, from, next) => {
//   /*
//     from 从哪来的路由对象
//     to 要去的路由对象
//     next 函数，必须要调用
//       next() 直接调用。去to对应路由地址
//       next('/xxx') 去其他路由
//   */
//   console.log(from, to)

//   next()
// })

export default router;
